<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(草稿箱)"></head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: menu(1)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h3 class="mb-4"><p class="lh-1">文章</p></h3>
                        <div>
                            <div class="list-group list-group-transparent mb-0">
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
                                    </span>新增文章
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/publish}">
                                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
                                    </span>已发布
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/admin/article/draft}">
									<span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
									</span>草稿箱
                                </a>
                                <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/admin/article/trash}">
                                    <span class="icon mr-3">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                                    </span>回收箱
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">草稿箱</h3>
                                <div class="alert alert-success col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-success">
                                    发布成功
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                                <div class="alert alert-error col-login float-right" style="position:absolute;zIndex:-1;right: 50px;display: none" role="alert"  id="alert-fail">
                                    发布失败，请稍后重试
                                    <a href="#" class="close" data-dismiss="alert" aria-label="close"></a>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table card-table table-hover text-nowrap">
                                    <thead>
                                    <tr>
                                        <th class="w-1">ID</th>
                                        <th>标题</th>
                                        <th>发表时间</th>
                                        <th>剩余保存时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="item : ${page.list}">
                                        <td><span class="text-muted" th:text="${item.id}">001401</span></td>
                                        <td><a href="javascript:void(0)" class="text-inherit" th:text="${item.title}"
                                               onclick="showDetail(this)">Java设计模式</a>
                                        </td>
                                        <td th:text="${#dates.format(item.updateTime, 'yyyy-MM-dd')}">
                                            2020-02-29
                                        </td>
                                        <td>[[${item.remainTime}]]天</td>
                                        <td>
                                            <a class="icon" href="javascript:void(0)">
                                                <i class="fe fe-edit"></i>
                                            </a>
                                            <a class="icon" href="javascript:void(0)">
                                                <i class="fe fe-trash-2"></i>
                                            </a>
                                            <span class="dropdown ml-1">
                                            <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">更多</button>
                                            <div class="dropdown-menu dropdown-menu-right">
                                              <a class="dropdown-item" href="#" th:attr="articleId=${item.id}" onclick="changeState(this)">
                                                发布
                                              </a>
                                            </div>
                                          </span>
                                        </td>
                                    </tr>
                                    </tbody>

                                </table>
                            </div>
                            <div class="card-body" th:if="${page.totalPage > 0}">
                                <span>
                                    共<b class="text-red">&nbsp;[[${page.totalNum}]]&nbsp;</b>
                                    篇文章，共<b class="text-red">&nbsp;[[${page.totalPage}]]&nbsp;</b>
                                    页，当前第<b class="text-red">&nbsp;[[${page.page}]]&nbsp;</b>页</span>
                                <ul class="pagination center float-right">
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == 1} ? 'disabled' : ''">
                                        <a class="page-link" href="#" tabindex="-1" th:href="'/admin/article/draft?page=' + ${page.page - 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z"></path>
                                                <polyline points="15 6 9 12 15 18"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                    <li class="page-item" th:classappend="${page.totalPage == 0 || page.page == page.totalPage} ? 'disabled' : ''">
                                        <a class="page-link" href="#" th:href="'/admin/article/draft?page=' + ${page.page + 1}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                 stroke-linecap="round" stroke-linejoin="round" class="icon">
                                                <polyline points="9 18 15 12 9 6"></polyline>
                                            </svg>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">标题</label>
                        <p class="tracking-wide">ElasticSearch</p>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <p class="tracking-wide">浏览数：<mark id="viewNum"></mark></p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <p class="tracking-wide">点赞数：<mark id="thumbUp"></mark></p>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="mb-3">
                                <p class="tracking-wide">收藏数：<mark id="collectNum"></mark></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/dashboard :: footer"></div>
</div>
<script>
    function showDetail(ele) {
        let viewNum = $(ele).attr("viewNum");
        let thumbUp = $(ele).attr("thumbUp");
        let collectNum = $(ele).attr("collectNum");
        $("#viewNum").text(viewNum);
        $("#thumbUp").text(thumbUp);
        $("#collectNum").text(collectNum);
        $("#modal-report").modal("show");
    }
    function changeState(ele) {
        $.ajax({
            type: "post",
            url: "/admin/article/state",
            data: {
                "articleId": $(ele).attr("articleId"),
                "state": "1"
            },
            success: function (data) {
                if (data.code == 200) {
                    $("#alert-success").fadeIn();
                    setTimeout(function() {
                        $("#alert-success").fadeOut();
                        window.location.reload();
                    }, 1000);


                } else {
                    $("#alert-fail").fadeIn();
                    setTimeout(function () {
                        $("#alert-fail").fadeOut();
                    }, 800);
                }
            },
            error: function (data) {
                $("#alert-fail").fadeIn();
            }
        })
    }
</script>
</body>
</html>
